<!DOCTYPE html>
<html lang="zh">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="作者" content=""> 
    <title>小组作业</title>
    <link rel="stylesheet" href="./CSS/zuoye.css" type="text/css">
    <link rel="icon" href="./CSS/img/1687086377123.png">
</head>
<body>
    <div class="container" id="blur">
        <div class="img">
            <p>白萝卜价格</p>
            <a href="javascript:void(0)" onclick="bailuobo()">Learn More</a>
        </div>
        <div class="img">
            <p>土豆价格</p>
            <a href="javascript:void(0)" onclick="tudou()">Learn More</a>
        </div>
        <div class="img">
            <p>西兰花价格</p>
            <a href="javascript:void(0)" onclick="xilanhua()">Learn More</a>
        </div>
        <div class="img">
            <p>胡萝卜价格</p>
            <a href="javascript:void(0)" onclick="huluobo()">Learn More</a>
        </div>
        <div class="img">
            <p>平菇价格</p>
            <a href="javascript:void(0)" onclick="pinggu()">Learn More</a>
        </div>
        <div class="img">
            <p>生菜价格</p>
            <a href="javascript:void(0)" onclick="shengcai()">Learn More</a>
        </div>
        <div class="img">
            <p>茄子价格</p>
            <a href="javascript:void(0)" onclick="qiezi()">Learn More</a>
        </div>
        <div class="img">
            <p>蒜苗价格</p>
            <a href="javascript:void(0)" onclick="suanmiao()">Learn More</a>
        </div>
        <div class="img">
            <p>香菇价格</p>
            <a href="javascript:void(0)" onclick="xianggu()">Learn More</a>
        </div>
        <div class="img">
            <p>大白菜价格</p>
            <a href="javascript:void(0)" onclick="dabaicai()">Learn More</a>
        </div>
    </div>
    <div id="bailuobo">
        <a href="javascript:void(0)" onclick="bailuobo()">Close</a>
        <img src="./CSS/img/白萝卜.jpg">
    </div>
    <div id="tudou">
        <a href="javascript:void(0)" onclick="tudou()">Close</a>
        <img src="./CSS/img/土豆.jpg">
    </div>
    <div id="xilanhua">
        <a href="javascript:void(0)" onclick="xilanhua()">Close</a>
        <img src="./CSS/img/西兰花.jpg">
    </div>
    <div id="huluobo">
        <a href="javascript:void(0)" onclick="huluobo()">Close</a>
        <img src="./CSS/img/胡萝卜.jpg">
    </div>
    <div id="pinggu">
        <a href="javascript:void(0)" onclick="pinggu()">Close</a>
        <img src="./CSS/img/平菇.jpg">
    </div>
    <div id="shengcai">
        <a href="javascript:void(0)" onclick="shengcai()">Close</a>
        <img src="./CSS/img/生菜.jpg">
    </div>
    <div id="qiezi">
        <a href="javascript:void(0)" onclick="qiezi()">Close</a>
        <img src="./CSS/img/茄子.jpg">
    </div>
    <div id="suanmiao">
        <a href="javascript:void(0)" onclick="suanmiao()">Close</a>
        <img src="./CSS/img/蒜苗.jpg">
    </div>
    <div id="xianggu">
        <a href="javascript:void(0)" onclick="xianggu()">Close</a>
        <img src="./CSS/img/香菇.jpg">
    </div>
    <div id="dabaicai">
        <a href="javascript:void(0)" onclick="dabaicai()">Close</a>
        <img src="./CSS/img/大白菜.jpg">
    </div>
    <script>
        function bailuobo(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let bailuobo = document.getElementById('bailuobo')
            bailuobo.classList.toggle('active')
        }
        function tudou(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let tudou = document.getElementById('tudou')
            tudou.classList.toggle('active')
        }
        function xilanhua(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let xilanhua = document.getElementById('xilanhua')
            xilanhua.classList.toggle('active')
        }
        function huluobo(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let huluobo = document.getElementById('huluobo')
            huluobo.classList.toggle('active')
        }
        function pinggu(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let pinggu = document.getElementById('pinggu')
            pinggu.classList.toggle('active')
        }
        function shengcai(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let shengcai = document.getElementById('shengcai')
            shengcai.classList.toggle('active')
        }
        function qiezi(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let qiezi = document.getElementById('qiezi')
            qiezi.classList.toggle('active')
        }
        function suanmiao(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let suanmiao = document.getElementById('suanmiao')
            suanmiao.classList.toggle('active')
        }
        function xianggu(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let xianggu = document.getElementById('xianggu')
            xianggu.classList.toggle('active')
        }
        function dabaicai(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let dabaicai = document.getElementById('dabaicai')
            dabaicai.classList.toggle('active')
        }
    </script>
</body>
</html>